@{
    ViewData["Title"] = "设备点检保养项目";
    Layout = null;
}
<link href="~/layui/css/layui.css" rel="stylesheet" />
<script src="~/layui/layui.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设备点检保养项目管理</title>
</head>
<body>
    <div class="layui-container" style="margin: 15px;">
        <!-- 搜索区域 -->
        <div class="layui-row layui-form">
            <div class="layui-col-md12">
                <div class="layui-inline">
                    <label class="layui-form-label">项目编码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="subcode" placeholder="请输入项目编码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">项目名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="subname" placeholder="请输入项目名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">项目类型</label>
                    <div class="layui-input-inline">
                        <select name="subtype" lay-filter="subtype">
                            <option value="">请选择项目类型</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="search">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="reset">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </div>

        <!-- 工具栏 -->
        <div class="layui-row" style="margin-top: 15px;">
            <div class="layui-col-md12">
                <button class="layui-btn" id="addBtn">
                    <i class="layui-icon layui-icon-add-1"></i> 添加
                </button>
                <button class="layui-btn layui-btn-warm" id="exportBtn">
                    <i class="layui-icon layui-icon-export"></i> 导出选中
                </button>
            </div>
        </div>

        <!-- 表格 -->
        <table id="dvsubjectTable" lay-filter="dvsubjectTable"></table>
    </div>

    <!-- 操作列模板 -->
    <script type="text/html" id="operationTpl">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>修改
        </a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>删除
        </a>
    </script>

    <!-- 是否启用模板 -->
    <script type="text/html" id="isdelTpl">
        {{#  if(d.isdel === 1){ }}
            <span class="layui-badge layui-bg-green">启用</span>
        {{#  } else { }}
            <span class="layui-badge layui-bg-red">禁用</span>
        {{#  } }}
    </script>

    <!-- 表单弹窗模板 -->
    <script type="text/html" id="formTpl">
        <div class="layui-form" lay-filter="dvsubjectForm" style="padding: 20px;">
            <input type="hidden" name="id" value="0">
            
            <div class="layui-form-item">
                <label class="layui-form-label">项目编码</label>
                <div class="layui-input-block">
                    <input type="text" name="subcode" required lay-verify="required" placeholder="请输入项目编码" autocomplete="off" class="layui-input">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-block">
                    <input type="text" name="subname" required lay-verify="required" placeholder="请输入项目名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">项目类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="subtype" value="设备点检" title="设备点检">
                    <input type="radio" name="subtype" value="设备保养" title="设备保养">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">是否启用</label>
                <div class="layui-input-block">
                    <input type="radio" name="isdel" value="1" title="启用" checked>
                    <input type="radio" name="isdel" value="0" title="禁用">
                </div>
            </div>
            
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">项目内容</label>
                <div class="layui-input-block">
                    <textarea name="subcontext" placeholder="请输入项目内容" class="layui-textarea"></textarea>
                </div>
            </div>
            
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">标准</label>
                <div class="layui-input-block">
                    <textarea name="subarea" placeholder="请输入标准" class="layui-textarea"></textarea>
                </div>
            </div>
            
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formSubmit">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </script>

    <script>
        layui.use(['table', 'form', 'layer', 'jquery'], function(){
            var table = layui.table,
                form = layui.form,
                layer = layui.layer,
                $ = layui.jquery;

            // 加载项目类型下拉框
            loadSubtypeList();

            // 表格实例
            table.render({
                elem: '#dvsubjectTable',
                url: '/Dvsubject/GetPagedList',
                method: 'get',
                page: true,
                request: {
                    pageName: 'pageIndex',
                    limitName: 'pageSize'
                },
                cols: [[ // 表头
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'subcode', title: '项目编码', width: 120},
                    {field: 'subname', title: '项目名称', width: 150},
                    {field: 'subtype', title: '项目类型', width: 120},
                    {field: 'isdel', title: '是否启用', width: 100, templet: '#isdelTpl'},
                    {field: 'subcontext', title: '项目内容', width: 200},
                    {field: 'subarea', title: '标准', width: 200},
                    {title: '操作', width: 160, toolbar: '#operationTpl', fixed: 'right'}
                ]],
                limits: [10, 20, 30, 50],
                limit: 10
            });

            // 监听搜索
            form.on('submit(search)', function(data){
                table.reload('dvsubjectTable', {
                    where: {
                        subcode: data.field.subcode,
                        subname: data.field.subname,
                        subtype: data.field.subtype
                    },
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            // 监听重置
            form.on('submit(reset)', function(data){
                // 清空搜索框的值
                $('input[name="subcode"]').val('');
                $('input[name="subname"]').val('');
                $('select[name="subtype"]').val('');
                
                // 重新加载表格，重置到第一页
                table.reload('dvsubjectTable', {
                    where: {
                        subcode: '',
                        subname: '',
                        subtype: ''
                    },
                    page: {
                        curr: 1
                    }
                });
                
                // 重新渲染表单
                form.render();
                return false;
            });

            // 添加按钮点击事件
            $('#addBtn').on('click', function(){
                // 打开添加表单弹框
                openFormDialog('添加项目', {});
            });

            // 导出按钮点击事件
            $('#exportBtn').on('click', function(){
                var checkStatus = table.checkStatus('dvsubjectTable');
                var data = checkStatus.data;
                
                if(data.length === 0){
                    layer.msg('请至少选择一条数据', {icon: 2});
                    return;
                }
                
                // 收集选中的ID
                var ids = [];
                $.each(data, function(index, item){
                    ids.push(item.Id);
                });
                
                // 构建导出URL
                var url = '/Dvsubject/ExportSelected?ids=' + ids.join(',');
                
                // 使用iframe下载文件
                var iframe = $('<iframe style="display:none;"></iframe>');
                iframe.attr('src', url);
                $('body').append(iframe);
                
                // 提示导出成功
                layer.msg('导出成功，请查看下载的文件', {icon: 1});
            });

            // 监听工具条事件
            table.on('tool(dvsubjectTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    // 获取最新数据
                    $.ajax({
                        url: '/Dvsubject/GetById',
                        type: 'get',
                        data: { id: data.id },
                        success: function(res) {
                            if(res.success) {
                                // 打开编辑表单弹框
                                openFormDialog('编辑项目', res.data);
                            } else {
                                layer.msg(res.message || '获取数据失败', {icon: 2});
                            }
                        },
                        error: function() {
                            layer.msg('获取数据失败', {icon: 2});
                        }
                    });
                } else if(obj.event === 'del'){
                    // 删除确认
                    layer.confirm('确定要删除此项目吗？', function(index){
                        $.ajax({
                            url: '/Dvsubject/Delete',
                            type: 'post',
                            data: { id: data.id },
                            success: function(res) {
                                if(res.success) {
                                    layer.msg('删除成功', {icon: 1});
                                    obj.del(); // 删除对应行（tr）的DOM结构
                                    layer.close(index); // 关闭弹窗
                                } else {
                                    layer.msg(res.message || '删除失败', {icon: 2});
                                }
                            },
                            error: function() {
                                layer.msg('删除失败', {icon: 2});
                            }
                        });
                    });
                }
            });

            // 打开表单弹框
            function openFormDialog(title, data) {
                layer.open({
                    type: 1,
                    title: title,
                    area: ['600px', '600px'],
                    content: $('#formTpl').html(),
                    success: function(layero, index) {
                        // 设置表单值
                        form.val('dvsubjectForm', data);
                        
                        // 监听表单提交
                        form.on('submit(formSubmit)', function(formData) {
                            var url = '/Dvsubject/Create';
                            var method = 'post';
                            
                            // 如果是编辑状态
                            if(data.id) {
                                url = '/Dvsubject/Update';
                                method = 'post';
                            }
                            
                            $.ajax({
                                url: url,
                                type: method,
                                data: data.id ? { id: data.id, ...formData.field } : formData.field,
                                success: function(res) {
                                    if(res.success) {
                                        layer.msg(data.id ? '更新成功' : '添加成功', {icon: 1});
                                        layer.close(index); // 关闭弹窗
                                        // 刷新表格
                                        table.reload('dvsubjectTable');
                                    } else {
                                        layer.msg(res.message || (data.id ? '更新失败' : '添加失败'), {icon: 2});
                                    }
                                },
                                error: function() {
                                    layer.msg(data.id ? '更新失败' : '添加失败', {icon: 2});
                                }
                            });
                            
                            return false; // 阻止表单跳转
                        });
                        
                        // 渲染表单
                        form.render();
                    }
                });
            }

            // 加载项目类型下拉框
            function loadSubtypeList() {
                $.ajax({
                    url: '/Dvsubject/GetSubtypeList',
                    type: 'get',
                    success: function(res) {
                        if(res.code === 0 && res.data) {
                            var select = $('select[name="subtype"]');
                            // 保留第一个选项
                            var firstOption = select.find('option:first');
                            select.empty().append(firstOption);
                            
                            // 添加选项
                            $.each(res.data, function(index, item) {
                                select.append('<option value="' + item + '">' + item + '</option>');
                            });
                            
                            // 重新渲染表单
                            form.render('select');
                        }
                    }
                });
            }
        });
    </script>

    <style>
        .layui-form-label {
            width: 100px;
        }
        .layui-input-inline {
            width: 200px;
        }
        .layui-container {
            padding: 15px;
            background-color: #fff;
        }
    </style>
</body>
</html> 